<script setup name="Business">
import DictTag from "@/components/DictTag/index.vue";
import { View } from '@element-plus/icons-vue'
import Message from 'vue-m-message'
import BaseForm from '@/components/BaseForm/BaseForm.vue'
import businessService from '@/api/business/index.js'
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import { useDict } from '@/utils/dict.js'
import { tableCheckChane } from '@/utils/index.js'

const { sys_product_name } = useDict('sys_product_name')
const { proxy } = getCurrentInstance()
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const tableData = ref([])
const tableColumn = reactive([
  {
    type: 'checkbox',
    width: 50,
    align: 'center',
  },
  {
    type: 'seq',
    width: 50,
    align: 'center',
  },
  { title: '业务类别', field: 'businessType', align: 'center',
  slots: {
    default:({ row })=>{
      return h(DictTag,{
        options: sys_product_name.value,
        value: row.businessType,
      })
    }
  }},
  { title: '业务名称', field: 'businessName', align: 'center' },
  { title: '代理费用', field: 'agencyFee', align: 'center' },
  { title: '其他费用', field: 'otherFee', align: 'center' },
  { title: '关联流程', field: 'flowName', align: 'center' },
  { title: '备注', field: 'remark', align: 'center' },
  {
    title: '操作',
    align: 'center',
    field: 'action',
    slots: {
      default: 'actions',
    },
    minWidth: 30,
  },
])
const searchConfig = reactive([
  {
    label: '业务类别',
    field: 'businessType',
    type: 'select',
    options: {
      data: sys_product_name,
    },
  },
  {
    label: '业务名称',
    field: 'businessName',
    type: 'input',
  },
])
const flowNameList = ref([])
const queryParam = ref({})
const fieldList = ref([
  {
    label: '业务类别',
    type: 'select',
    field: 'businessType',
    options: {
      data: sys_product_name,
    },
    span: 12,
    rules: [
      { required: true, message: '请选择业务类别', trigger: 'change' },
    ],
  },
  {
    label: '业务名称',
    type: 'input',
    field: 'businessName',
    span: 12,
    rules: [
      { required: true, message: '请输入业务名称', trigger: 'blur' },
    ],
  },
  {
    label: '代理费用',
    type: 'input',
    field: 'agencyFee',
    span: 12,
    rules: [
      {
        required: true,
        message: '请输入代理费用',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '其他费用',
    type: 'input',
    field: 'otherFee',
    span: 12,
    rules: [
      {
        required: true,
        message: '请输入其他费用',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '关联流程',
    type: 'select',
    field: 'flowId',
    options: {
      data: flowNameList,
      label: 'flowName',
      value: 'flowId',
    },
    span: 12,
    rules: [
      {
        required: true,
        message: '请选择关联流程',
        trigger: 'change',
      }
    ]
  },
  {
    label: '备注',
    type: 'input',
    field: 'remark',
    span: 12,
  },
])
const formData = ref({})
const dialogVisible = ref(false)
const businessId = ref(null)
const actionType = ref('')

onMounted(() => {
  getList()
})

function getList() {
  const params = {
    pageSize: pagerConfig.value.pageSize,
    pageNum: pagerConfig.value.currentPage,
    ...queryParam.value,
  }
  businessService.list(params).then((res) => {
    const { rows, total } = res
    pagerConfig.value.total = total
    tableData.value = rows
  })
}

function handleAdd() {
  getBusinessFlowList()
  actionType.value = 'add'
  dialogVisible.value = true
}

function handleDelete(row) {
  let delId
  if (row) {
    delId = row.businessId
  }
  else {
    delId = ids.value.join(',')
  }
  businessService.delete(delId).then((res) => {
    const { code } = res
    if (code === 200) {
      Message.success('删除成功')
      ids.value = []
      getList()
    }
  })
}
function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'businessId', ids.value)
}

function handleExport() {
  proxy.download('system/business/export', { ...queryParam.value, exportIds: ids.value.join(',') }, `business_${new Date().getTime()}.xlsx`)
}

function handleSearch(params) {
  queryParam.value = params
  pagerConfig.value.currentPage = 1
  getList()
}

function handleActionTable(row, type) {
  getBusinessFlowList()
  actionType.value = type
  businessId.value = row.businessId
  businessService.detail(row.businessId).then((res) => {
    formData.value = res.data
    dialogVisible.value = true
  })
}

function getBusinessFlowList() {
  businessService.getBusinessFlow().then((res) => {
    flowNameList.value = res.data
  })
}

function handClose() {
  formData.value = {}
  dialogVisible.value = false
  actionType.value = ''
  businessId.value = null
}

function handleSubmit(e) {
  console.log(e)
  console.log(formData.value)
  if (businessId.value) {
    const params = {
      ...formData.value,
      businessId: businessId.value,
    }
    businessService.update(params).then((res) => {
      const { code } = res
      if (code === 200) {
        Message.success('修改成功')
        handClose()
        getList()
      }
    })
  }
  else {
    businessService.add(formData.value).then((res) => {
      const { code } = res
      if (code === 200) {
        Message.success('新增成功')
        handClose()
        getList()
      }
    })
  }
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="searchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:business:add']"
          type="primary"
          class="el-gradient-primary"
          @click="handleAdd"
        >
          新增
          <el-icon class="el-icon--right">
            <CirclePlusFilled />
          </el-icon>
        </el-button>
        <el-button
          v-hasPermi="['system:business:remove']"
          type="danger"
          class="el-gradient-danger"
          :disabled="ids.length === 0"
          @click="handleDelete(null)"
        >
          删除
          <el-icon class="el-icon--right">
            <Delete />
          </el-icon>
        </el-button>
        <el-button
          v-hasPermi="['system:business:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :row-config="{
          keyField: 'businessId',
        }"
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
        max-height="650px"
      >
        <template #actions="{ row }">
          <el-button
            v-hasPermi="['system:business:query']"
            size="small"
            text
            type="primary"
            @click="handleActionTable(row, 'view')"
          >
            查看
          </el-button>
          <el-button
            v-hasPermi="['system:business:edit']"
            size="small"
            text
            type="success"
            @click="handleActionTable(row, 'edit')"
          >
            修改
          </el-button>
          <span v-hasPermi="['system:business:remove']">
            <el-popconfirm
              title="确定删除此业务吗？"
              @confirm="handleDelete(row)"
            >
              <template #reference>
                <el-button
                  size="small"
                  text
                  type="danger"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </span>
        </template>
      </vxe-grid>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      class="custom-dialog"
      width="50%"
      @close="handClose"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ actionType === 'add' ? '新增' : businessId ? '修改' : '查看' }}业务管理
          </span>
        </div>
      </template>
      <BaseForm
        :field-list="fieldList"
        :model="formData"
        :options="{
          disabled: actionType === 'view',
        }"
        @submit="handleSubmit"
        @cancel="handClose"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>
